<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- tab contents -->
<div class="ddp-ui-tab-contents">
  <!-- guide message -->
  <div class="ddp-box-message" *ngIf="datasource.connType === CONN_TYPE.LINK">
    <!-- if only linked source -->
    <div class="ddp-box-synch type-info">
      <div class="ddp-txt-synch">
        <em class="ddp-icon-info"></em>
        {{'msg.storage.ui.linked.source.preview' | translate}}
      </div>
    </div>
    <!-- //if only linked source -->
    <!-- if linked source include geo type-->
    <div class="ddp-box-synch type-info" *ngIf="derivedFieldList.length > 0">
      <div class="ddp-txt-synch">
        <em class="ddp-icon-info"></em>
        {{'msg.storage.ui.linked.source.preview.include.geo' | translate}}
      </div>
    </div>
    <!-- //if linked source include geo type-->
  </div>
  <!-- //guide message -->
  <!-- datagrid -->
  <div class="ddp-datagrid">
    <!-- option -->
    <div class="ddp-ui-option ddp-clear">
      <div class="ddp-wrap-edit">
        <!-- search -->
        <component-input
          [compType]="'search'"
          [showClear]="true"
          [value]="searchTextKeyword"
          [placeHolder]="'msg.storage.ui.search.data' | translate"
          (changeValue)="searchText($event)">
        </component-input>
        <!-- //search -->
      </div>
      <!-- label -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.comm.th.role' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option ddp-inline">
          <div class="ddp-ui-option-in">
            <label class="ddp-label-radio" *ngFor="let type of roleTypeFilterList">
              <input type="radio"
                     (change)="onChangeRoleType(type)"
                     [checked]="selectedRoleTypeFilter.value === type.value">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">{{type.label}}</span>
            </label>
          </div>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //label -->

      <!-- label -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.storage.ui.type' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <!-- selectbox -->
          <!-- 선택시 : ddp-selected 추가 -->
          <storage-filter-select-box
            [filterList]="logicalTypeFilterList"
            [selectedFilter]="selectedLogicalTypeFilter"
            [isEnableIcon]="true"
            (changedFilter)="onChangeLogicalType($event)"></storage-filter-select-box>
          <!-- //selectbox -->
        </div>
        <!-- //edit option -->
      </div>
      <!-- //label -->
      <div class="ddp-reset">
        <a href="javascript:" class="ddp-btn-reset3" (click)="onClickResetFilter()"></a>
      </div>
      <!-- right -->
      <div class=" ddp-fright">
        <div class="ddp-data-form">
          <input type="text" class="ddp-data-input"
                 [ngModel]="rowNum"
                 (keyup)="onChangeRowNumber($event)"
                 input-mask="number">
          <!--<strong>/ 2,333</strong>-->
          {{'msg.storage.ui.row' | translate}}
        </div>
        <a href="javascript:" class="ddp-btn-bg" (click)="onClickExcelDownload()"><em class="ddp-icon-link-down"></em>{{'msg.log.btn.download.csv' | translate}}</a>
      </div>
      <!-- //right -->
    </div>
    <!-- //option -->
    <!-- fix grid -->
    <div class="ddp-fix-grid" [class.meta-grid]="isExistTimestamp" [class.meta-grid-type]="metaData" [class.ddp-msg-info1]="datasource.connType === CONN_TYPE.LINK && derivedFieldList.length === 0" [class.ddp-msg-info2]="datasource.connType === CONN_TYPE.LINK && derivedFieldList.length > 0"
         #main grid-component
         (onHeaderRowCellRendered)="extendGridHeader($event)">
    </div>
    <!-- //fix grid -->
  </div>
  <!-- //datagrid -->
</div>
<!-- //tab contents -->
